<template>
  <div class="app-container">
    <div class="block">
      <el-form ref="form" :model="form">
        <el-input type="hidden" ref="content" v-model="form.content"></el-input>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-button icon="el-icon-plus" type="primary" @click="save">{{
              $t('button.submit')
            }}</el-button>
            <el-button icon="el-icon-back" @click.native="back">{{ $t('button.back') }}</el-button>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-input
                  v-model="form.title"
                  minlength="1"
                  placeholder="文章标题"
                  style="font-size: 1.2rem; margin: 0.2rem 0rem"
                ></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-select v-model="form.idChannel" placeholder="选择栏目">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="16">
                <el-input
                  v-model="form.author"
                  minlength="1"
                  placeholder="作者"
                  style="margin-bottom: 0.2rem"
                ></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-form-item label="题图" v-if="ifUpload">
              <el-upload
                class="upload-demo"
                drag
                :action="uploadUrl"
                :headers="uploadHeaders"
                :before-upload="handleBeforeUpload"
                :on-success="handleUploadSuccess"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">上传图片</div>
              </el-upload>
            </el-form-item>
            <img :src="articleImg" style="height: 8rem" v-if="ifUpload !== true" />
            <el-button icon="el-icon-edit" v-if="ifUpload !== true" @click.native="uploadImg"
              >修改题图</el-button
            >
          </el-col>
        </el-row>
        <br />
      </el-form>
      <div :class="{ fullscreen: fullscreen }" class="tinymce-container editor-container">
        <textarea :id="tinymceId" class="tinymce-textarea" />
        <div class="editor-custom-btn-container">
          <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import editorImage from '@/components/Tinymce';
import { Loading } from 'element-ui';
import plugins from './plugins';
import toolbar from './toolbar';
import { save, get } from '@/api/cms/article';
import { getList } from '@/api/cms/channel';
import { getApiUrl } from '@/utils/utils';
import { getToken } from '@/utils/auth';

export default {
  name: 'Tinymce',
  components: { editorImage },
  props: {
    id: {
      type: String,
      default: function () {
        return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '');
      },
    },
    value: {
      type: String,
      default: '',
    },
    toolbar: {
      type: Array,
      required: false,
      default() {
        return [];
      },
    },
    menubar: {
      type: String,
      default: 'file edit insert view format table',
    },
    height: {
      type: Number,
      required: false,
      default: 360,
    },
  },
  data() {
    return {
      uploadUrl: '',
      uploadFileId: '',
      uploadHeaders: {
        Authorization: '',
      },
      loadingInstance: {},
      form: {
        title: '',
        author: '',
        idChannel: '1',
        content: '',
        img: '',
      },
      articleImg: '',
      ifUpload: true,
      options: [],
      hasChange: false,
      hasInit: false,
      tinymceId: this.id,
      fullscreen: false,
      languageTypeList: {
        en: 'en',
        zh: 'zh_CN',
      },
    };
  },
  computed: {
    language() {
      return this.languageTypeList[this.$store.getters.language];
    },
  },
  watch: {
    value(val) {
      if (!this.hasChange && this.hasInit) {
        this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val || ''));
      }
    },
    language() {
      this.destroyTinymce();
      this.$nextTick(() => this.initTinymce());
    },
  },
  mounted() {
    this.init();
    this.initTinymce();
  },
  activated() {
    this.initTinymce();
  },
  deactivated() {
    this.destroyTinymce();
  },
  destroyed() {
    this.destroyTinymce();
  },
  methods: {
    init() {
      this.uploadUrl = getApiUrl() + '/file';
      this.uploadHeaders['Authorization'] = getToken();
      const id = this.$route.query.id;
      if (id) {
        get(id).then((response) => {
          this.form = response.data;
          this.setContent(response.data.content);
          this.articleImg = this.uploadUrl + '/getImgStream?idFile=' + response.data.img;
          this.ifUpload = false;
        });
      }
      getList().then((response) => {
        this.options = response.data;
      });
    },
    initTinymce() {
      const _this = this;
      window.tinymce.init({
        value: 'aaaaaa',
        language: this.language,
        selector: `#${this.tinymceId}`,
        height: this.height,
        body_class: 'panel-body ',
        object_resizing: false,
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
        menubar: this.menubar,
        plugins: plugins,
        end_container_on_empty_block: true,
        powerpaste_word_import: 'clean',
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: 'square',
        advlist_number_styles: 'default',
        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
        default_link_target: '_blank',
        link_title: false,
        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
        init_instance_callback: (editor) => {
          if (_this.value) {
            editor.setContent(_this.value);
          }
          _this.hasInit = true;
          editor.on('NodeChange Change KeyUp SetContent', () => {
            this.hasChange = true;
            const content = editor.getContent();
            this.form.content = content;
          });
        },
        setup(editor) {
          editor.on('FullscreenStateChanged', (e) => {
            _this.fullscreen = e.state;
          });
        },
      });
    },
    destroyTinymce() {
      const tinymce = window.tinymce.get(this.tinymceId);
      if (this.fullscreen) {
        tinymce.execCommand('mceFullScreen');
      }

      if (tinymce) {
        tinymce.destroy();
      }
    },
    setContent(value) {
      window.tinymce.get(this.tinymceId).setContent(value);
    },
    getContent() {
      window.tinymce.get(this.tinymceId).getContent();
    },
    imageSuccessCBK(arr) {
      const _this = this;
      arr.forEach((v) => {
        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`);
      });
    },
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const content = this.form.content.split('%').join('%25');
          save({
            id: this.form.id,
            title: this.form.title,
            author: this.form.author,
            idChannel: this.form.idChannel,
            content: content,
            img: this.form.img,
          }).then(() => {
            this.$message({
              message: this.$t('common.optionSuccess'),
              type: 'success',
            });
            this.back();
          });
        } else {
          return false;
        }
      });
    },
    back() {
      this.$router.go(-1);
    },

    handleBeforeUpload() {
      if (this.uploadFileId !== '') {
        this.$message({
          message: this.$t('common.mustSelectOne'),
          type: 'warning',
        });
        return false;
      }
      this.loadingInstance = Loading.service({
        lock: true,
        text: this.$t('common.uploading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
    },
    handleUploadSuccess(response) {
      this.loadingInstance.close();
      if (response.code === 20000) {
        this.form.img = response.data.id;
      } else {
        this.$message({
          message: this.$t('common.uploadError'),
          type: 'error',
        });
      }
    },
    uploadImg() {
      this.ifUpload = !this.ifUpload;
    },
  },
};
</script>

<style scoped>
.tinymce-container {
  position: relative;
  line-height: normal;
}

.tinymce-container >>> .mce-fullscreen {
  z-index: 10000;
}

.tinymce-textarea {
  visibility: hidden;
  z-index: -1;
}

.editor-custom-btn-container {
  position: absolute;
  right: 4px;
  top: 4px;
  /*z-index: 2005;*/
}

.fullscreen .editor-custom-btn-container {
  z-index: 10000;
  position: fixed;
}

.editor-upload-btn {
  display: inline-block;
}
</style>
